<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	<style type="text/css">
		#c1 {
			width: 100%;
			height: 400px;
			border: 2px solid orangered;
			background: #ffc;
			margin: 20px auto;
			
		}
		#v1 {
			width: 0;
			height: 0;
			margin: 20px auto;
			display: inline-block;
			float: right;
			
		}
		
		
	</style>
	<canvas id="c1"></canvas>
	<video autoplay muted id="v1">
		<source src="videos/movie01.mp4" type="video/mp4" />
		<source src="videos/movie01.ogg" type="video/ogg" />
		<source src="videos/movie01.webm" type="video/webm" />
	</video>
	<img src="" alt="picture" />
	<script type="text/javascript">
		let img = document.getElementsByTagName("img")[0];
		let c1 = document.getElementById("c1");
		let v1 = document.getElementById("v1");
		
		let ctx1 = c1.getContext("2d");
		let [width, height] = [c1.width, c1.height];
		ctx1.drawImage(v1, 0, 0, width, height);
		let src = c1.toDataURL("image/jpeg");
		img.src = src;
		v1.addEventListener('play', function() 
		{
			
			( function run() {
				ctx1.drawImage(v1,0,0, width, height);
				this.i01 = setTimeout(run, 0); 
				
			})();
			
		},false);
		
		v1.addEventListener('pause',function() 
		{
			//clearInterval(this.i);
			clearInterval(this.i01);
		},false);
		v1.addEventListener('ended',function() 
		{
			//clearInterval(this.i);
			clearInterval(this.i01);
			v1.play();
		},false);
		
	</script>
	
</body>
</html>